import React from 'react'
import {
    Text,
    TouchableOpacity,
    View,
    NativeModules,
} from "react-native";
import AsyncStorage from "@react-native-community/async-storage";
import DropDownList from "../component/drop-down-list";

import Style from "../../common/style";

import Title from "../component/title";

export default class DropDownPage extends React.Component {

    state = {
        showList: false,
        left: 0,
        top: 0,
        message: '',
        items: [
            {
                id: 10000,
                name: '河南省',
                subItems: [
                    {
                        id: 11000,
                        name: '郑州市',
                        subItems: [
                            {
                                id: 11100,
                                name: '中原区',
                                subItems: [
                                    {
                                        id: 11110,
                                        name: '桐柏路街道',
                                    }, {
                                        id: 11120,
                                        name: '陇海路街道',
                                    }, {
                                        id: 11130,
                                        name: '秦岭路街道',
                                    }
                                ]
                            },
                            {
                                id: 11200,
                                name: '金水区',
                                subItems: [
                                    {
                                        id: 11210,
                                        name: '东风路街道',
                                    }, {
                                        id: 11220,
                                        name: '花园路街道',
                                    }, {
                                        id: 11230,
                                        name: '文化路街道',
                                    }, {
                                        id: 11240,
                                        name: '东明路街道',
                                    }, {
                                        id: 11250,
                                        name: '黄河路街道',
                                    }, {
                                        id: 11260,
                                        name: '农业路街道',
                                    }
                                ]
                            },
                            {
                                id: 11300,
                                name: '高新区',
                            }
                        ]
                    }, {
                        id: 12000,
                        name: '焦作市',
                    }
                ]
            }, {
                id: 20000,
                name: '河北省',
                subItems: [
                    {
                        id: 21000,
                        name: '承德市',
                    }
                ]
            }, {
                id: 30000,
                name: '山东省',
                subItems: [
                    {
                        id: 31000,
                        name: '济南市',
                    }
                ]
            }
        ]
    };

    selected(ids, text) {
        this.setState({
            message: ids + " : " + text,
            showList: false,
        });

        AsyncStorage.setItem('learn-drop-list-select-ids', ids);
        AsyncStorage.setItem('learn-drop-list-select-test', text)
    }

    showDropDownList(e) {
        NativeModules.UIManager.measure(e.currentTarget, (x, y, width, height, pageX, pageY) => {
            console.log("location", x, y, width, height, pageX, pageY);
            this.setState({
                showList: true,
                left: pageX,
                top: pageY + height,
                width: width,
            })
        });
    }

    async componentDidMount() {
        let ids= await AsyncStorage.getItem('learn-drop-list-select-ids');
        let text= await AsyncStorage.getItem('learn-drop-list-select-test');

        this.setState({
            message: ids + " : " + text,
        })
    }

    render() {
        return (
            <View style={Style.page}>
                <Title title={'DropDownList'}/>

                <TouchableOpacity ref={(ref) => this.button = ref}
                                  style={Style.button}
                                  onPress={(e) => this.showDropDownList(e)}>
                    <Text>{this.state.message}</Text>
                </TouchableOpacity>

                <Text>占位符</Text>
                <Text>占位符</Text>
                <Text>占位符</Text>
                <Text>占位符</Text>
                <Text>占位符</Text>

                <DropDownList
                    args={this.state.items}
                    show={this.state.showList}
                    left={this.state.left}
                    top={this.state.top}
                    width={this.state.width}
                    onSelected={(ids, text) => this.selected(ids, text)}
                    onTouchOutside={() => {
                        this.setState({showList: false})
                    }}
                />

            </View>
        )
    }
}
